import React, { useState } from 'react'
import { Form, Input, Select, Button, Radio, Cascader, message } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import styles from './index.less'
import Personal from './personal'
import Enterprise from './enterprise'
import request from '@/utils/request'
import { history } from 'umi'

const { Option } = Select
export default (props: any) => {

    const [applyType, setApplyType] = useState("1")
    const [accountType, setAccountType] = useState("1")
    const [settleDurationVisable, setSettleDurationVisable] = useState(false)

    const requireIf = (field: string, val: any, message: string) => {
        return ({ getFieldValue }: any) => ({
            validator(rule: any, value: any) {
                if (!value && getFieldValue(field) === val) {
                    return Promise.reject(message);
                }
                return Promise.resolve();
            }
        })
    }

    const bankCard = <>
        < Form.Item label="结算银行开户名" required name="settle_bank_account_name" rules={[
            requireIf("settle_account_type", "1", "结算银行开户名不能为空")
        ]}>
            <Input style={{ width: "420px" }} />
        </Form.Item >
        <Form.Item label="结算公司银行账号" required name="settle_bank_account" rules={[
            requireIf("settle_account_type", "1", "结算公司银行账号不能为空")
        ]}>
            <Input style={{ width: "420px" }} />
        </Form.Item>
        <Form.Item label="结算开户银行名称" required name="settle_bank_name" rules={[
            requireIf("settle_account_type", "1", "结算开户银行名称不能为空")
        ]}>
            <Input style={{ width: "420px" }} />
        </Form.Item>
        <Form.Item label="结算开户银行所在地" required name="settle_bank_address" rules={[
            requireIf("settle_account_type", "1", "结算开户银行所在地不能为空")
        ]}>
            <Input placeholder="选择结算开户银行所在地" />
        </Form.Item>
    </>

    const aliPay = <>
        < Form.Item label="支付宝用户名" required name="zfb_account_name" rules={[
            requireIf("settle_account_type", "2", "支付宝用户名不能为空")
        ]}>
            <Input style={{ width: "420px" }} />
        </Form.Item >
        <Form.Item label="支付宝账号" required name="zfb_account" rules={[
            requireIf("settle_account_type", "2", "支付宝账号不能为空")
        ]}>
            <Input style={{ width: "420px" }} />
        </Form.Item>
    </>

    const settleDuration = <>
        <Form.Item label="入驻时长" required name="join_duration" rules={[
            requireIf("is_own", false, "请选择入驻时长")
        ]}>
            <Select style={{ width: "220px" }} placeholder="选择入驻时长">
                <Option value="1">一年</Option>
                <Option value="2">二年</Option>
            </Select>
        </Form.Item>
    </>


    const getUploadUrl = (values: any, filed: string) => {
        if (values[filed] && values[filed].length > 0) {
            values[filed] = values[filed][0]['url'];
        }
    }
    const converNumber = (values: any, filed: string) => {
        values[filed] && (values[filed] = Number(values[filed]))
    }

    const onFinish = (values: any) => {

        converNumber(values, "industry_id")
        converNumber(values, "level_id")
        converNumber(values, "apply_type")
        converNumber(values, "settle_account_type")
        converNumber(values, "join_duration")

        getUploadUrl(values, "id_card_front")
        getUploadUrl(values, "id_card_back")

        request(`/store/create`, {
            method: 'POST',
            data: { ...values },
        }).then((result) => {
            if (result.code !== 200) {
                message.warning(result.message)
                return
            }
            message.success(result.message)

        })
    }


    return (
        <PageHeaderWrapper title={false}>
            <Form
                initialValues={{ is_own: false, apply_type: "1", settle_account_type: "1" }}
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 16 }}
                onFinish={onFinish}
            >

                <div className={styles.cardDiv}>
                    <nav className={styles.navTitle}>店铺信息</nav>
                    <div className={styles.cardContent}>
                        <Form.Item label="店铺名称" required name="title" rules={[{ required: true, message: '请输入店铺名称' }]}>
                            <Input style={{ width: "420px" }} />
                        </Form.Item>
                        <Form.Item label="主营行业" required name="industry_id" rules={[{ required: true, message: '请选择主营行业' }]}>
                            <Select style={{ width: "220px" }} placeholder="选择主营行业" >
                                <Option value="1">行业一</Option>
                                <Option value="2">行业二</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item label="是否自营" name="is_own">
                            <Radio.Group onChange={(e) => setSettleDurationVisable(e.target.value)}>
                                <Radio value={false}>否</Radio>
                                <Radio value={true}>是</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item label="店铺等级" required name="level_id" rules={[{ required: true, message: '请选择店铺等级' }]}>
                            <Select style={{ width: "220px" }} placeholder="选择店铺等级">
                                <Option value="1">等级一</Option>
                                <Option value="2">等级二</Option>
                            </Select>
                        </Form.Item>
                        {!settleDurationVisable && settleDuration}
                    </div>
                </div>
                <div className={styles.cardDiv}>
                    <nav className={styles.navTitle}>申请类型</nav>
                    <div className={styles.cardContent}>
                        <Form.Item label="申请类型" required name="apply_type">
                            <Radio.Group onChange={(e) => setApplyType(e.target.value)}>
                                <Radio value="1">个人店铺</Radio>
                                <Radio value="2">企业店铺</Radio>
                            </Radio.Group>
                        </Form.Item>
                    </div>
                </div>
                {applyType === "1" && <Personal />}
                {applyType === "2" && <Enterprise />}
                <div className={styles.cardDiv}>
                    <nav className={styles.navTitle}>结算账户</nav>
                    <div className={styles.cardContent}>
                        <Form.Item label="结算账户类型" required name="settle_account_type">
                            <Radio.Group onChange={(e) => setAccountType(e.target.value)}>
                                <Radio value="1">银行卡</Radio>
                                <Radio value="2">支付宝</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {accountType === "1" && bankCard}
                        {accountType === "2" && aliPay}
                    </div>
                </div>
                <div className={styles.cardDiv}>
                    <nav className={styles.navTitle}>用户信息</nav>
                    <div className={styles.cardContent}>
                        <Form.Item label="商家登录用户名" required name="username" rules={[{ required: true, message: '请输入商家登录用户名' }]}>
                            <Input style={{ width: "420px" }} />
                        </Form.Item>
                        <Form.Item label="商家登陆密码" required name="password" rules={[{ required: true, message: '请输入商家登陆密码' }]}>
                            <Input style={{ width: "420px" }} />
                        </Form.Item>
                    </div>
                </div>
                <div className={styles.cardDiv}>
                    <div className={styles.cardContent}>
                        <Form.Item wrapperCol={{ offset: 5 }}>
                            <Button type="primary" htmlType="submit" style={{ marginRight: "8px" }}>保存</Button>
                            <Button onClick={() => {
                                history.push('/store/list')
                            }}>返回</Button>
                        </Form.Item>
                    </div>
                </div>
            </Form>
        </PageHeaderWrapper>
    )
}